import styled from "styled-components";

export const RooItemWrapper = styled.div`
  width: 25%;
  padding: 8px;
  .room-item {
    &__inner {
      width: 100%;
    }
    &-cover {
      position: relative;
      padding: 66.66% 8px 0;
      border-radius: 3px;
      overflow: hidden;
      img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }
    &-meta {
      margin: 10px 0 5px;
      font-size: 12px;
      font-weight: bold;
      color: ${props => props.verify_color};
    }
    &-name {
      font-size: 16px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    &-price {
      margin: 8px 0;
    }
    &-bottom {
      color: ${props => props.theme.textColor.primary};
      font-size: 12px;
      display: flex;
      align-items: center;
      font-weight: 600;
      .ant-rate-star:not(:last-child) {
        margin-inline-end: 2px;
      }
    }
    &-count {
      margin: 0 2px 0 4px;
    }
  }
`